<!--
 * @Author: gonghairun
 * @Date: 2021-09-07 09:04:17
 * @LastEditors: gonghairun
 * @LastEditTime: 2022-06-09 09:37:18
 * @Description: 
-->
<template>
	<div class="multipleSelect" ref="mbMenu">
		<div class="slotContent" v-show="isShow" :style="{ width: suffixCodeList.includes('202') ? '750px' : '500px' }">
			<div
				class="loading"
				v-loading="loading"
				v-if="loading"
				element-loading-text="网络开小差，正在努力加载..."
				element-loading-spinner="el-icon-loading"
			></div>
			<el-table
				:data="bargeList"
				ref="multipleTable"
				style="width: 100%"
				height="350"
				max-height="350"
				:row-class-name="tableRowClassName"
				@select-all="handleSelectAll"
				@select="handleSelectionChange"
			>
				<el-table-column v-if="dataType == 0" type="selection" width="55"></el-table-column>
				<el-table-column :width="suffixCodeList.includes('202') ? '120' : '175'" property="nameCn" label="驳船名">
					<template slot="header" slot-scope="{}">
						<span class="star"></span>
						<span class="table-header-title">驳船名</span>
					</template>
				</el-table-column>
				<!-- <el-table-column :width="suffixCodeList.includes('202') ? '120' : '175'" property="riverType" label="驳船类别">
                    <template slot="header" slot-scope="{}"> 
                        <span class="star"></span>
                        <span class="table-header-title">驳船类别</span>
                    </template>
                    <template slot-scope="scope">
                        <el-select size="mini" filterable :clearable="false" placeholder="驳船类别" v-model="scope.row.riverType" class="inputClass" @change="typeChange($event,scope.row.index,scope.row.id)">
                            <el-option label="内河驳船" value="01"></el-option>
                            <el-option label="长江驳船" value="02"></el-option>
                        </el-select>
                    </template>
                </el-table-column> -->
				<el-table-column width="150" property="pcs" label="货名" v-if="suffixCodeList.includes('202')">
					<template slot="header" slot-scope="{}">
						<span class="star"></span>
						<span class="table-header-title">货名</span>
					</template>
					<template slot-scope="scope">
						<el-select
							class="inputClass"
							v-model="scope.row.fontIdList"
							multiple
							filterable
							placeholder="货名"
							size="mini"
							:clearable="false"
							@change="fontChange($event, scope.row.index, scope.row.id)"
						>
							<el-option
								v-for="(item, index) in fontIdList"
								:key="index"
								:label="item.shipNameVoyage + '/' + item.name"
								:value="item.id"
							></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column :width="suffixCodeList.includes('202') ? '90' : '120'" property="pcs" label="件数" v-if="loadType == 1">
					<template slot-scope="scope">
						<el-input
							class="inputClass"
							size="mini"
							v-model="scope.row.pcs"
							placeholder="件数"
							@input="pcsInput($event, scope.row.index, scope.row.id)"
						></el-input>
					</template>
				</el-table-column>
				<el-table-column :width="suffixCodeList.includes('202') ? '90' : '120'" property="weight" label="重量" v-if="loadType == 1">
					<template slot="header" slot-scope="{}">
						<span class="star"></span>
						<span class="table-header-title">重量</span>
					</template>
					<template slot-scope="scope">
						<el-input
							class="inputClass"
							size="mini"
							v-model="scope.row.weight"
							placeholder="重量"
							@input="weightInput($event, scope.row.index, scope.row.id)"
						></el-input>
					</template>
				</el-table-column>
				<el-table-column :width="suffixCodeList.includes('202') ? '85' : '120'" property="volume" label="体积">
					<template slot-scope="scope">
						<el-input
							class="inputClass"
							size="mini"
							v-model="scope.row.volume"
							placeholder="体积"
							@input="volumeInput($event, scope.row.index, scope.row.id)"
						></el-input>
					</template>
				</el-table-column>
				<el-table-column :width="dataType == 0 ? '150' : '210'" property="tel" label="联系方式">
					<template slot-scope="scope">
						<el-input
							class="inputClass"
							size="mini"
							v-model="scope.row.tel"
							placeholder="联系方式"
							@input="telInput($event, scope.row.index, scope.row.id)"
						></el-input>
					</template>
				</el-table-column>
			</el-table>
			<div class="tableFooter">
				<el-button @click="submit()" size="mini" type="primary">确认</el-button>
			</div>
		</div>

		<!-- -->
		<el-select
			multiple
			ref="multipleS"
			@remove-tag="handleRemove"
			:popper-append-to-body="false"
			collapse-tags
			v-model="bargeId"
			filterable
			size="mini"
			:clearable="true"
			remote
			class="others"
			reserve-keyword
			@focus="onFocus"
			@blur="onBlur"
			placeholder="驳船号"
			:remote-method="remoteMethodBarge"
			v-popover:popover
		>
			<el-option
				style="display: none"
				v-for="(item, index) in bargeList"
				:key="index"
				:label="item.nameCn"
				:value="item.id"
			></el-option>
		</el-select>
	</div>
</template>

<script>
export default {
	name: "multipleSelect",
	props: {
		bargeIdList: {
			type: Array,
		},
		submitHandleClick: {
			type: Function,
		},
		suffixCodeList: {
			type: Array,
		},
		bargeEditList: {
			type: Array,
		},
		dataType: {
			type: Number,
		},
		loadType: {
			type: Number,
		},
	},
	components: {},
	data() {
		return {
			value: "",
			bargeId: [],
			bargeList: [],
			selectList: [],
			isShow: false,
			fontIdList: this.$store.state.order.fontIdList,
			allBargeList: [],
			isNeedDragTeam: this.$store.state.order.isNeedDragTeam,
			startpage: 1,
			query: "",
			loading: true,
		}
	},
	created() {},
	watch: {},

	mounted() {
		document.addEventListener("click", e => {
			if (this.$refs.mbMenu) {
				if (!this.$refs.mbMenu.contains(e.target)) {
					this.isShow = false
				}
			}
		})
		let box = this.$refs.mbMenu
		box.addEventListener("scroll", this.handleScroll, true)
		console.log(this.bargeEditList)
		if (this.dataType == 0) {
			this.getBargeList("")
		} else {
			let bargeList = this.bargeEditList
			let bargeId = []
			bargeList.map(item => {
				item.nameCn = item.bargeName
				item.id = item.bargeId
				let fontIdList = []
				item.fontIdList.map(childItem => {
					console.log(childItem)
					console.log(this.fontIdList)
					this.fontIdList.map(grandItem => {
						if (grandItem.id == childItem) {
							fontIdList.push(childItem)
						}
					})
					// if (this.fontIdList.includes(childItem)) fontIdList.push(childItem)
				})
				this.$set(item, "fontIdList", fontIdList)
				bargeId.push(item.bargeId)
			})
			this.bargeId = bargeId
			this.bargeList = bargeList
			this.allBargeList = this.bargeList
			this.loading = false
		}
	},
	methods: {
		handleScroll(e) {
			//变量scrollTop是滚动条滚动时，距离顶部的距离
			var scrollTop = e.target.scrollTop
			//变量windowHeight是可视区的高度
			var windowHeight = e.target.clientHeight
			//变量scrollHeight是滚动条的总高度
			var scrollHeight = e.target.scrollHeight
			//滚动条到底部的条件
			if (scrollTop + windowHeight == scrollHeight) {
				//写后台加载数据的函数
				console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight)
				if (this.dataType == 0) {
					this.startpage++
					this.getBargeList(this.query)
				}
			}
		},
		weightInput(value, index, id) {
			console.log(index)
			this.$set(
				this.bargeList[index],
				"weight",
				("" + value) // 第一步：转成字符串
					.replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
					.replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
					.replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
					.match(/^\d*(\.?\d{0,3})/g)[0] || "" // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
			)
			this.selectList.map(item => {
				if (item.id == id) {
					this.$set(
						item,
						"weight",
						("" + value) // 第一步：转成字符串
							.replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
							.replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
							.replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
							.match(/^\d*(\.?\d{0,3})/g)[0] || "" // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
					)
				}
			})
			// console.log(this.bargeList[index])
		},
		telInput(value, index, id) {
			console.log(index)
			this.$set(
				this.bargeList[index],
				"tel",
				("" + value) // 第一步：转成字符串
					.replace(/[^\d]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
					.replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
					.replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
					.match(/^\d*(\.?\d{0,0})/g)[0] || "" // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
			)
			this.selectList.map(item => {
				if (item.id == id) {
					this.$set(
						item,
						"tel",
						("" + value) // 第一步：转成字符串
							.replace(/[^\d]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
							.replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
							.replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
							.match(/^\d*(\.?\d{0,0})/g)[0] || "" // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
					)
				}
			})
			// console.log(this.bargeList[index])
		},
		volumeInput(value, index, id) {
			console.log(index)
			this.$set(
				this.bargeList[index],
				"volume",
				("" + value) // 第一步：转成字符串
					.replace(/[^\d]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
					.replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
					.replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
					.match(/^\d*(\.?\d{0,3})/g)[0] || "" // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
			)
			this.selectList.map(item => {
				if (item.id == id) {
					this.$set(
						item,
						"volume",
						("" + value) // 第一步：转成字符串
							.replace(/[^\d]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
							.replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
							.replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
							.match(/^\d*(\.?\d{0,3})/g)[0] || "" // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
					)
				}
			})
			// console.log(this.bargeList[index])
		},
		pcsInput(value, index, id) {
			this.$set(
				this.bargeList[index],
				"pcs",
				("" + value) // 第一步：转成字符串
					.replace(/[^\d]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
					.replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
					.replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
					.match(/^\d*(\.?\d{0,0})/g)[0] || "" // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
			)
			this.selectList.map(item => {
				if (item.id == id) {
					this.$set(
						item,
						"pcs",
						("" + value) // 第一步：转成字符串
							.replace(/[^\d]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
							.replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
							.replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
							.match(/^\d*(\.?\d{0,0})/g)[0] || "" // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
					)
				}
			})
		},
		fontChange(value, index, id) {
			this.$set(this.bargeList[index], "fontIdList", value)
			this.selectList.map(item => {
				if (item.id == id) {
					this.$set(item, "fontIdList", value)
				}
			})
		},
		typeChange(value, index, id) {
			this.$set(this.bargeList[index], "riverType", value)
			this.selectList.map(item => {
				if (item.id == id) {
					this.$set(item, "riverType", value)
				}
			})
		},
		tableRowClassName({ row, rowIndex }) {
			//把每一行的索引放进row
			row.index = JSON.stringify(rowIndex)
		},
		/**
		 * @Author: gonghairun
		 * @description: 确认
		 * @param {*}
		 * @return {*}
		 */
		submit() {
			if (this.dataType == 0) {
				if (this.selectList.length == 0) {
					this.$message.error("请至少选中一条数据")
					return
				}
			}
			let weightLength = this.selectList.filter(item => !item.weight)
			console.log(weightLength)
			if (this.loadType == 1) {
				if (weightLength.length != 0) {
					this.$message.error("重量不可以为空")
					return
				}
				if (this.suffixCodeList.includes("202")) {
					let fontIdListLength = this.selectList.filter(item => !item.fontIdList || item.fontIdList.length == 0)
					if (fontIdListLength.length != 0) {
						this.$message.error("货名不可以为空")
						return
					}
				}
			}
			if (this.dataType == 0) {
				let idList = []
				this.selectList.map(item => {
					idList.push(item.id)
				})
				this.bargeId = idList
			} else {
				let idList = []
				this.bargeList.map(item => {
					idList.push(item.id)
				})
				this.bargeId = idList
			}
			this.isShow = false
			console.log(this.selectList)
			if (this.dataType == 0) {
				this.submitHandleClick(this.selectList, this.bargeList)
			} else {
				this.submitHandleClick(this.bargeList, this.bargeList)
			}
		},
		/**
		 * @Author: gonghairun
		 * @description: 获取焦点
		 * @param {*}
		 * @return {*}
		 */
		onFocus() {
			this.isShow = true
			// this.$refs.multipleS.blur()
			// this.$nextTick(()=>{
			//     this.bargeList.map((item)=>{
			//         this.selectList.map((childItem)=>{
			//             if (item.id == childItem.id) {
			//                 this.$refs.multipleTable.toggleRowSelection(item, true)
			//             }
			//         })
			//     })
			// })
		},
		/**
		 * @Author: gonghairun
		 * @description: 移除选项
		 * @param {*} value
		 * @return {*}
		 */
		handleRemove(value) {
			console.log(value)
			this.$refs.multipleTable.clearSelection()
			this.selectList.map((item, index) => {
				if (item.id == value) {
					this.selectList.splice(index, 1)
				}
			})
			this.$nextTick(() => {
				this.bargeList.map(item => {
					this.selectList.map(childItem => {
						if (item.id == childItem.id) {
							this.$refs.multipleTable.toggleRowSelection(item, true)
						}
					})
				})
			})
			this.indexHandleRemove(this.selectList)
			this.isShow = true
			this.$refs.multipleS.blur()
		},
		/**
		 * @Author: gonghairun
		 * @description: 失去焦点
		 * @param {*}
		 * @return {*}
		 */
		onBlur() {
			this.$refs.multipleS.blur()
		},
		// handleclic() {
		//     this.$refs.multipleS.query = this.query
		//     alert(this.$refs.multipleS.query)
		// },
		// /**
		//  * @Author: gonghairun
		//  * @description: 打开弹窗
		//  * @param {*}
		//  * @return {*}
		//  */
		// showHandleClick() {
		//     const _this = this
		//     _this.bargeList.map((item)=>{
		//         _this.selectList.map((childItem)=>{
		//             if (item.id == childItem.id) {
		//                 _this.$set(item,'num',childItem.num)
		//                 _this.$set(item,'weight',childItem.weight)
		//                 _this.$refs.multipleTable.toggleRowSelection(item, true)
		//             }
		//         })
		//     })
		// },
		/**
		 * @Author: gonghairun
		 * @description: 模糊查询
		 * @param {*}
		 * @return {*}
		 */
		remoteMethodBarge(query) {
			this.query = query
			if (this.dataType == 0) {
				this.bargeList = []
				this.startpage = 1
				if (query !== "") {
					this.getBargeList(query)
				} else {
					this.getBargeList("")
				}
			} else {
				let filterData = this.allBargeList.filter(item => {
					let isshipName = query != "" && item.bargeName.includes(query) ? true : query == "" ? true : false
					//返回筛选条件
					return isshipName
				})
				this.bargeList = filterData
			}
		},
		/**
		 * @Author: gonghairun
		 * @description: 多选
		 * @param {*} value
		 * @return {*}
		 */
		handleSelectionChange(value) {
			console.log(value)
			// let selectList = []
			// this.bargeList.map((item)=>{
			//     value.map((childItem)=>{
			//         if (item.id == childItem.id) {
			//             selectList.push(item)
			//         }
			//     })
			// })
			this.selectList = value
			// let idList = []
			// value.map((item)=>{
			//     idList.push(item.id)
			// })
			// this.bargeId = idList
			// this.indexHandleRemove(this.selectList)
		},
		handleSelectAll(value) {
			this.selectList = JSON.parse(JSON.stringify(value))
		},
		/**
		 * @Author: gonghairun
		 * @description: 获取驳船数据
		 * @param {*} keyword
		 * @return {*}
		 */
		getBargeList(keyword) {
			const _this = this
			_this.loading = true
			let bargeId = []
			_this.selectList.map(item => {
				bargeId.push(item.id)
			})
			_this.$http
				.get(
					`/${this.$ServiceName}/api/external/public/listbarge?keyword=${keyword}&id=${bargeId.join(",")}&startpage=${
						_this.startpage
					}&pagesize=20`
				)
				.then(res => {
					console.log(res)
					let data = res.data.data
					_this.bargeList = _this.bargeList.concat(data)
					_this.$nextTick(() => {
						_this.bargeList.map(item => {
							if (bargeId.includes(item.id) && bargeId.length != 0) {
								_this.selectList.map(childItem => {
									if (item.id == childItem.id) {
										_this.$set(item, "pcs", childItem.pcs)
										_this.$set(item, "weight", childItem.weight)
										_this.$set(item, "volume", childItem.volume)
										_this.$set(item, "fontIdList", childItem.fontIdList)
										_this.$set(item, "tel", childItem.tel)
										_this.$set(item, "riverType", childItem.riverType)
										_this.$refs.multipleTable.toggleRowSelection(item, true)
									}
								})
							} else {
								_this.$set(item, "pcs", "")
								_this.$set(item, "weight", "")
								_this.$set(item, "volume", "")
								_this.$set(item, "riverType", "01")
								_this.$set(item, "tel", item.captainPhone)
								if (_this.suffixCodeList.includes("202") && _this.fontIdList.length != 0) {
									let idList = []
									_this.fontIdList.map(item => {
										idList.push(item.id)
									})
									_this.$set(item, "fontIdList", idList)
								}
							}
						})
						_this.loading = false
					})
				})
				.catch(error => {
					// _this.loading = false
				})
		},
	},
}
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
